<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
    <meta name="renderer" content="webkit"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
    <title>宠物商城</title>



    <link rel="stylesheet" href="/layui/css/layui.css" th:href="@{/layui/css/layui.css}"/>
    <link th:href="@{/css/font-awesome.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/common.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/css/custom.css}" rel="stylesheet" type="text/css"/>
    <script th:src="@{/layui/jquery-3.2.1.min.js}"></script>
    <script th:src="@{/layui/layui.js}"></script>
</head>
<body class="site-home">
<!--包含 头部模块-->
<div th:replace="mall/comm::head"></div>


<div class="layui-carousel swiper-container" id="lunbo">
    <div carousel-item>
        <div>
            <a href="#">
                <img width="100%" height="100%" src="https://img2.epetbar.com/nowater/2019-04/17/19/c1f9edacf713af8a7b7f6aab31fcf11e.jpg@!water" />
            </a>
        </div>
        <div>
            <a href="#">
                <img width="100%" height="100%" src="https://img2.epetbar.com/nowater/2019-04/12/16/e14c150282440ac5725b64e9ddce350e.jpg" />
            </a>
        </div>
        <div>
            <a href="#">
                <img width="100%" height="100%" src="https://img2.epetbar.com/nowater/2019-04/16/10/beda5eef98e7af5e7f8e7922245b37ac.jpg" />
            </a>
        </div>
        <div>
            <a href="#">
                <img width="100%" height="100%" src="https://img2.epetbar.com/nowater/2019-04/16/14/715d8f19c473c766cc17bd65abe0d696.jpg" />
            </a>
        </div>
        <div>
            <a href="#">
                <img width="100%" height="100%" src="https://img2.epetbar.com/nowater/2019-04/15/18/7664174b0d25603587229cd16b9b14ee.jpg" />
            </a>
        </div>
    </div>
</div>



<!--页面主体内容-->
<div class="layui-container" id="content">

    <div class="layui-main">


        <hr/>
        <!-- 搜索 -->
        <div class="layui-row">
            <div class="sh-pl-p layui-col-space10">
                <form action="product/so.do" method="get" _lpchecked="1">
                    <div class="sh-pl-in">
                        <input id="soso" name="word" size="10" maxlength="20" value="" placeholder="搜一搜" autocomplete="off">
                    </div>
                    <div class="sh-pl-btn">
                        <input type="submit" value="搜索">
                    </div>
                </form>
            </div>
        </div>

        </div>
        <!--搜索结果-->
        <div class="layui-row">
            <div class="layui-col-md12"><h1 class="site-h1"><i class="fa fa-calendar" style="color: #FFB800;"></i>
                &nbsp;搜索结果</h1></div>
        </div>
        <div class="layui-row" style="text-align: center;">
            <div class="cc-l-wrap" id="product_so">

                <div class='layui-col-md3 layui-col-xs6' th:each="product : ${products}">
                    <div class='card layui-anim layui-anim-scale'>
                        <div class='product_image'>
                            <img class='shopimg' style='width: 300px;height: 300px;' src="" th:src="${product.image}">
                        </div>
                        <div style='text-align: left;'>商城价：<span class='price1' th:text="${product.marketPrice}"></span></div>
                        <div class='product_title'><a th:href="${'/mall/product/get.html?id='}+${product.id}" th:text="${product.title}"></a></div>
                    </div>
                </div>


            </div>
            <a class="more" href="javascript: more();">点击加载更多</a>
        </div>


        <script type="text/javascript">
            layui.use('carousel', function(){
                var carousel = layui.carousel;
                //建造实例
                carousel.render({
                    elem: '#lunbo'
                    ,width: 'auto' //设置容器宽度
                    ,height: '500'
                    ,arrow: 'always' //始终显示箭头
                    //,anim: 'updown' //切换动画方式
                });
            });

        </script>

        <script>
            //            <![CDATA[
            var pageNum = 0;
            $(function () {
                //加载搜索商品
                loadSo(pageNum);
            });


            function loadSo(pageindex) {
                $.get("product/so.do?word="+$("input[name='word']").val()+"pageSize=12&pageNum=" + pageindex, function (data) {
                    layer.closeAll();
                    if (data.state == 0) {
                        pageNum++;
                        var div = $("#product_so");
                        if ((!data.data || data.data.length <= 0) && pageNum > 0) {
                            layer.msg("没有更多了");
                        }
                        appendToPage(div, data.data);
                    } else {
                        layer.msg("请求失败！")
                    }
                });

            }
            //加载更多
            function more() {
                var load = layer.load();
                loadSo(pageNum);
            }
            // 将数据渲染到页面上
            function appendToPage(div, data) {
                $(data).each(function (index, item) {
                    var productDiv = $("<div class='layui-col-md3 layui-col-xs6'></div>");
                    var conetDiv = $("<div class='card layui-anim layui-anim-scale'></div>");
                    productDiv.append(conetDiv);
                    var imgdiv = $("<div class='product_image'><img class='shopimg' style='width: 300px;height: 300px;' src=" + item.image + "></div>");
                    conetDiv.append(imgdiv);
                    var priceDiv = $("<div style='text-align: left;'>商城价：<span class='price1'>" + item.shopPrice + "</span></div>");
                    conetDiv.append(priceDiv);
                    conetDiv.append($("<div class='product_title'><a href='/mall/product/get.html?id="+item.id+"'>" + item.title + "</a></div>"));
                    // conetDiv.append($("<div class='product_title'><a href='/mall/product/get.html?id="+item.id+"'>" + item.title + "</a></div>"));
                    div.append(productDiv);
                });
            }

            //            ]]>
        </script>
    </div>


    </div>

<!--底部-->
<div th:replace="mall/comm::foot"></div>
</body>
</html>
